<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M519.68 725.678c-158.72 0-287.744-129.024-287.744-287.744V92.16c0-18.77 15.36-34.13 34.13-34.13h506.88c18.78 0 34.14 15.36 34.14 34.13v345.774c.338 76.8-29.696 148.818-83.968 203.09-54.272 54.61-126.638 84.654-203.438 84.654zM272.896 98.99v338.944c0 136.192 110.592 246.784 246.784 246.784 65.874 0 128-25.6 174.418-72.366 46.428-46.766 72.028-108.544 72.028-174.418V98.99h-493.23z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M272.896 561.152a29.798 29.798 0 0 1-5.458-.686c-105.134-29.348-175.79-128-175.79-245.412V203.09c0-18.77 15.36-34.13 34.13-34.13h129.024c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48H132.608v105.134c0 98.642 58.706 181.586 145.746 205.824 10.926 3.072 17.408 14.336 14.336 25.252a20.685 20.685 0 0 1-19.794 15.022zM429.23 808.96c-11.264 0-20.48-9.216-20.48-20.48v-96.256c0-11.264 9.216-20.48 20.48-20.48s20.48 9.216 20.48 20.48v96.256c0 11.264-9.216 20.48-20.48 20.48zm180.9 0c-11.264 0-20.48-9.216-20.48-20.48v-96.256c0-11.264 9.216-20.48 20.48-20.48s20.48 9.216 20.48 20.48v96.256c0 11.264-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M677.038 965.97c-11.264 0-20.48-9.216-20.48-20.48v-104.1c0-16.732-13.312-30.044-30.044-30.044H412.846a29.86 29.86 0 0 0-30.044 30.044v104.1c0 11.264-9.216 20.48-20.48 20.48s-20.48-9.216-20.48-20.48v-104.1c0-39.26 31.744-71.004 71.004-71.004h213.668c39.26 0 71.004 31.744 71.004 71.004v104.1c0 11.264-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M741.55 965.97H297.81c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h443.74c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zm24.914-404.818a20.685 20.685 0 0 1-19.794-15.022 20.531 20.531 0 0 1 14.336-25.252c87.04-24.238 145.746-107.182 145.746-205.824V209.92H784.558c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h129.024c18.77 0 34.13 15.36 34.13 34.13v111.964c0 117.412-70.656 216.064-175.79 245.412a29.798 29.798 0 0 1-5.458.686zm-252.59-100.69h14.684c25.252-2.396 49.828-11.612 67.236-28.672 16.046-16.046 29.358-39.936 31.068-64.174 1.7-22.866-4.782-34.816-15.708-46.418-1.362 11.94 0 22.866-3.748 32.42-6.492-8.868-8.878-21.842-18.78-27.648.348 34.478-19.108 59.74-55.634 49.5 6.83 18.084 23.552 26.624 49.49 25.6 1.372 1.362-1.024 3.072-1.7 3.748-9.216 9.216-23.552 16.384-40.96 16.384-32.768 0-53.934-22.528-54.272-54.948-.348-42.67 38.564-76.462 78.162-78.848 21.166-1.372 40.96 10.24 50.176 23.204-4.434-31.058-29.01-41.636-54.272-51.876 53.248-2.396 76.8 24.576 92.846 59.392-7.516-48.814-34.478-83.292-88.412-87.388-5.796 0-65.536-4.096-107.52 44.032-21.156 24.238-38.912 55.644-36.178 97.628 3.072 49.828 39.25 85.668 93.522 88.064z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Icona2 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
